<template>
  <div class="aphorism">
    <img :src="thisInfo.imageUrl" class="aphorism_img" />
    <h1 style="margin-top: 30px; margin-bottom: 0px; font-size: 40px">
      {{ thisInfo.message }}
    </h1>
    <h3>{{ thisInfo.name }}</h3>
  </div>
</template>

<script lang="ts">
// <script setup lang="ts">
import { Options, prop, Vue } from "vue-class-component";
import { defineComponent, PropType, reactive, ref, onMounted} from "vue";
import {imageShow} from "../utils/common.js"
export interface AphorismInfo {
  message: string | undefined;
  imageUrl: string;
  name: string | undefined;
}
export default defineComponent({
  props: {
    message: String,
    imageUrl: String,
    name: String,
    info: Object as PropType<AphorismInfo>,
  },
  setup: (props, context) => {
   if (!props.info) {
      var defaultData = {
        thisInfo: {
          message: props.message,
          imageUrl: imageShow(props.imageUrl),
          name: props.name,
        },
      };
    } else {
      console.log(props.info.imageUrl);

      var defaultData = {
        thisInfo: {
          message: props.info.message,
          imageUrl: imageShow(props.info.imageUrl),
          name: props.info.name,
        },
      };
    }
   return defaultData;
  },
  requireImage(value: string): string {
    
    if (typeof value === "string") {
      if (value.indexOf("http") > 0) {
        return "" + value;
      } else {
        return "../assets/" + value;
      }
    }
    return "never.jpg";
  }
})
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
h3 {
  padding-left: 120px;
  text-align: left;
  margin-bottom: 0px;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.aphorism {
  margin-right: auto;
  margin-left: auto;
  margin-top: auto;
  margin-bottom: 10px;

  overflow: hidden;
  width: 1200px;
  background: #eee;

  border-top-left-radius: 60px;
  border-bottom-left-radius: 60px;
  text-align: center;
}
.aphorism_img {
  float: left;
  width: 120px;
  height: 120px;
  border-radius: 60px;
}
</style>